<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天 - 深绘智创</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="logo">
                <img src="{{ url_for('static', filename='img/favicon.svg') }}" alt="Logo">
                <h1>深绘智创</h1>
            </div>
            <button id="newChat" class="new-chat-btn">
                <i class="material-icons">add</i>新对话
            </button>
            <div class="history-list">
                <h3>历史记录</h3>
                <ul id="historyItems">
                    <!-- 历史记录项将被动态添加 -->
                </ul>
            </div>
        </div>
        
        <div class="main-content">
            <div id="chatArea" class="chat-area">
                <!-- 欢迎界面 -->
                <div class="welcome-screen">
                    <h2>欢迎使用「深绘智创｜多模态AI生成平台」</h2>
                    <p>代码编织逻辑，文字雕琢灵感，文件解码信息——您的需求将在这里获得多维度的智慧响应。</p>
                    
                    <div class="examples">
                        <div class="example-card" data-prompt="生成赛博朋克风格的城市景观，霓虹灯光与悬浮交通工具">
                            <h3>智能图像工坊</h3>
                            <p>生成赛博朋克风格的城市景观，霓虹灯光与悬浮交通工具</p>
                        </div>
                        <div class="example-card" data-prompt="生成Python爬虫脚本：自动抓取电商平台价格数据">
                            <h3>代码生成引擎</h3>
                            <p>生成Python爬虫脚本：自动抓取电商平台价格数据</p>
                        </div>
                        <div class="example-card" data-prompt="生成科技行业分析报告：2024年AI芯片发展趋势">
                            <h3>文本创作中心</h3>
                            <p>生成科技行业分析报告：2024年AI芯片发展趋势</p>
                        </div>
                        <div class="example-card" data-prompt="根据《三体》黑暗森林理论生成科幻概念图+世界观设定">
                            <h3>跨模态实验室</h3>
                            <p>根据《三体》黑暗森林理论生成科幻概念图+世界观设定</p>
                        </div>
                        <div class="example-card" data-prompt="生成智慧农场物联网系统架构图+传感器部署代码">
                            <h3>行业解决方案</h3>
                            <p>生成智慧农场物联网系统架构图+传感器部署代码</p>
                        </div>
                        <div class="example-card" data-prompt="生成元宇宙时装秀：可穿戴数字服饰+秀场脚本">
                            <h3>创意无限空间</h3>
                            <p>生成元宇宙时装秀：可穿戴数字服饰+秀场脚本</p>
                        </div>
                    </div>
                </div>
                <!-- 添加加载动画，当加载历史对话时显示 -->
                <div class="loading-chat" style="display: none;">
                    <div class="loading-spinner"></div>
                    <p>加载对话历史...</p>
                </div>
            </div>
            
            <div class="input-area">
                <textarea id="userInput" placeholder="请输入描述，例如"请生成4张图书馆内景的图片"..."></textarea>
                <button id="sendBtn" class="send-btn tooltip" data-tooltip="发送">
                    <i class="material-icons">send</i>
                </button>
            </div>
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div id="imageModal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <img id="modalImage" src="" alt="预览图片">
            <button id="downloadBtn" class="download-btn">下载图片</button>
        </div>
    </div>

    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
    <script>
        // 将会话ID传递给JavaScript
        const sessionId = "{{ session_id }}";
        const initialMode = "chat";
    </script>
    <script src="{{ url_for('static', filename='js/api.js') }}"></script>
    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
    <script src="{{ url_for('static', filename='js/history.js') }}"></script>
    <script src="{{ url_for('static', filename='js/sidebar.js') }}"></script>
    <script>
    function displayGeneratedImages(images) {
        const imageContainer = document.getElementById('generated-images');
        imageContainer.innerHTML = '';
        
        images.forEach((base64Image, index) => {
            const img = document.createElement('img');
            img.src = 'data:image/png;base64,' + base64Image;
            img.className = 'generated-image';
            img.alt = `生成的图片 ${index + 1}`;
            imageContainer.appendChild(img);
        });
    }

    async function generateImages(prompt) {
        try {
            const response = await fetch('/api/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    prompt: prompt,
                    steps: 30,
                    guidance_scale: 7.5,
                    width: 512,
                    height: 512,
                    batch_size: 1
                })
            });
            
            const data = await response.json();
            
            if (data.error) {
                throw new Error(data.error);
            }
            
            displayGeneratedImages(data.images);
        } catch (error) {
            console.error('生成图片失败:', error);
            alert('生成图片失败: ' + error.message);
        }
    }
    </script>
</body>
</html> 